
<template> 
<el-card class="marginTop20">
    <div>
          <!-- <el-steps :active="2" align-center finish-status="success">
            <el-step title="Step 1" description="Some description111" />
            <el-step title="Step 2" description="Some description" />
            <el-step title="Step 3" description="Some description" />
            <el-step title="Step 4" description="Some description" />
        </el-steps> -->

<el-steps :active="activeIndex" align-center>
   <el-step v-for="(item, index) in decisionList" :key="index">
        <template #icon>
            <el-icon v-if="status>=35 && activeIndex==index+1" size="32px" color="#FF4242" @mouseenter="mouseenterShow(index)"><CircleCloseFilled /></el-icon>
            <el-icon v-else-if="status>=10 && index==4 && status<=30" size="32px" color="#2158F3" @mouseenter="mouseenterShow(index)"><SuccessFilled /></el-icon>
            <el-icon v-else-if="activeIndex>index" size="32px" color="#2158F3" @mouseenter="mouseenterShow(index)"><SuccessFilled /></el-icon>
      </template>
      <template #title>
          <div v-if="status>=35 && activeIndex==index+1" style="color: #FF4242;">
            <div v-if="index==2">{{item.title}}({{formData.packedQuantity}} / {{formData.packingAllocationQuantity}})</div>
            <div v-else-if="index==3"> {{item.title}}({{formData.returnedQuantity}} / {{formData.packedQuantity}})</div>
            <div v-else> {{item.title}}</div>
           </div>
         <div v-else-if="activeIndex>index" style="color: #2158F3;">
            <div v-if="index==2">{{item.title}}({{formData.packedQuantity}} / {{formData.packingAllocationQuantity}})</div>
            <div v-else-if="index==3"> {{item.title}}({{formData.returnedQuantity}} / {{formData.packedQuantity}})</div>
            <div v-else> {{item.title}}</div>
           </div>
         <div v-else style="color: #555555;">
            <div v-if="index==2"> {{item.title}}({{formData.packedQuantity}} / {{formData.packingAllocationQuantity}})</div>
            <div v-else-if="index==3"> {{item.title}}({{formData.returnedQuantity}} / {{formData.packedQuantity}})</div>
            <div v-else-if="status>=10 && index==4 && status<=30" style="color: #2158F3;"> {{item.title}}</div>
            <div v-else> {{item.title}}</div>
         </div>
      </template>
      <template #description>
        <div v-if="status>=35 && activeIndex==index+1" style="color: #FF4242;"> 取消原因：{{formData.remark || '--'}}</div>
        <div v-else-if="index==0" style="color: #2158F3;">{{formatDate(formData.createTime)}}</div>
        <div v-else-if="index==1" style="color: #2158F3;">{{formatDate(formData.signDate)}}</div>
      </template>
   </el-step>
   </el-steps>
    <div v-if="status<35">
        <div class="but-for" v-if="indexShow==1 && formData.downloadUrl">
                <div class="but-list" @click="downloadUrlTap">查看合同</div>
            </div>
            <div class="but-for" v-if="indexShow==2">
                <div class="but-list" @click="tixiangTap(1)">提箱单</div>
                <div class="but-list" @click="tixiangTap(2)">提箱记录</div>
                <div class="but-list" @click="downloadFile">下载提箱单</div>
            </div>
            <div class="but-for" v-if="indexShow==3">
                <div class="but-list" @click="huanxiangTap(1)">还箱单</div>
                <div class="but-list" @click="huanxiangTap(2)">还箱记录</div>
            </div>
              <div class="but-for" v-if="indexShow==4">
                <div class="but-list" @click="financialTap(1)">费用</div>
                <div class="but-list" @click="financialTap(2)">账单</div>
                <div class="but-list" @click="financialTap(3)">发票</div>

            </div>
    </div>
    </div>
    </el-card>
    <!-- 查看合同 -->
     <el-dialog v-model="downloadUrlDialog" :with-header="false">
        <pdfViewer :url="downloadUrl.url"></pdfViewer>
    </el-dialog>
    <!-- 提箱 -->
    <el-drawer v-model="tixiangDialog" size="60%" @close="closeDialog">
      <template #header>
        <span class="_before">提箱</span>
      </template>
      <tixiangTabs :tabsValue="tabsValue"></tixiangTabs>
      </el-drawer>
      <!-- 还箱 -->
       <el-drawer v-model="huanxiangDialog" @close="closeDialog" size="60%">
      <template #header>
        <span class="_before">还箱</span>
      </template>
      <huanxiangTabs :tabsValue="tabsValue"></huanxiangTabs>
      </el-drawer>
      <!-- 财务 -->
    <el-drawer v-model="financialDialog" @close="closeDialog" size="60%">
      <template #header>
        <span class="_before">财务</span>
      </template>
      <financialTabs :tabsValue="tabsValue"></financialTabs>
      </el-drawer>
</template>
  
<script lang="ts" setup>
import { computed, reactive, toRefs, watch,inject ,provide} from 'vue'
import pdfViewer from '@/components/pdf'
import { formatDate } from '@/utils'
import tixiangTabs from '@/views/orderManage/huiDiaoOrder/component/tixiangTabs.vue'
import huanxiangTabs from '@/views/orderManage/huiDiaoOrder/component/huanxiangTabs.vue'
import financialTabs from '@/views/orderManage/huiDiaoOrder/component/financialTabs.vue'
import { callbackBoxFileList } from '@/api/orderManage/packing'
import { downloadIamge } from '@/utils/download'
import { ElLoading,ElMessage } from 'element-plus';


// status 
const props = defineProps({
    status:{  // 订单所处流程节点的 2:待确认 3:待签署 5:待开提箱单 10:待提[待提未付/待提已付] 15:已提[已提未付/已提已付] 20：未还[未还已付/未还未付] 25：已还[已还已付/已还未付] 30：已完成 35:已取消
        type: Number,
        default: 2  
    },
    cancellationStatus:{  //取消订单时 订单所处的订单状态
        type: Number,
        default: 0   
    },
    remark:{ //订单取消原因
        type: String,
        default: ''
    },
     returnedPay:{  //大于0 已收或者已付
        type: Number,
        default: 0   
    },
    isAgent: {   //当前等角色  true 货代角色  false 集装箱公司角色
    type: Boolean,
    default: false   
  }
})
const formData = inject('formData')
const isAgent=inject('isAgent') //当前等角色  true 货代角色  false 集装箱公司角色
const getSetBoxInfo = inject('getSetBoxInfo')
const tabsValue=ref(1)
console.log('formData',formData)
const activeIndex=ref(1)
const indexShow=ref(1)
const downloadUrlDialog=ref(false)
const downloadUrl=ref('')
const tixiangDialog=ref(false)
const huanxiangDialog=ref(false)
const financialDialog=ref(false)
provide('tabsValue',  tabsValue);

watch(() => props.status, (newVal, oldVal) => {
    // status  // 订单所处流程节点的 2:待确认 3:待签署 5:待开提箱单 10:待提[待提未付/待提已付] 15:已提[已提未付/已提已付] 20：未还[未还已付/未还未付] 25：已还[已还已付/已还未付] 30：已完成 35:已取消
    if(props.status>=35){
         if(formData.value.cancellationStatus==2){
        activeIndex.value=1 
        }else if(formData.value.cancellationStatus==3){
        activeIndex.value=2 
        }else if(formData.value.cancellationStatus==5){
        activeIndex.value=3
        }else if(formData.value.cancellationStatus==10){
        activeIndex.value=3
        }else if(formData.value.cancellationStatus==15){
        activeIndex.value=3
        }else if(formData.value.cancellationStatus==20){
        activeIndex.value=4
        }else if(formData.value.cancellationStatus==25){
        activeIndex.value=4
        }else if(formData.value.cancellationStatus==30){
        activeIndex.value=6
        }
    }else{
        if(newVal==2){
       activeIndex.value=1 
        }else if(newVal==3){
        activeIndex.value=2 
        }else if(newVal==5){
        activeIndex.value=3
        }else if(newVal==10){
        activeIndex.value=3
        }else if(newVal==15){
        activeIndex.value=3
        }else if(newVal==20){
        activeIndex.value=4
        }else if(newVal==25){
        activeIndex.value=4
        }else if(newVal==30){
        activeIndex.value=6
        }
    }
   
},{immediate:true});
 const decisionList=ref([
    {
        title:'下单',
        status:2,
    },
    {
        title:'签署',
        status:3,
    },
     {
        title:'提箱',
        status:15,
    },
    {
        title:'还箱',
        status:25,
    },
    {
        title:'财务',
        status:15,
    },
    {
        title:'完成',
        status:30,
    }

 ])
 //下载--------------- 
const downloadFile = () => {
    
      callbackBoxFileList(formData.value.id).then((res: any) => {
        let data=res.data
        if(data.length==0){
            return ElMessage.error('暂无可下载的提箱单')
        }
        data.forEach((item) => {
        downloadIamge(item.url,item.originalFileName || new Date(Date.now()+28800000).toISOString())

        })
      })
//   if (rowData.pdfFile) {
//     let pdfFile = JSON.parse(rowData.pdfFile)
//     pdfFile=pdfFile[0]
//     if (!pdfFile.url) return ElMessage.error('未找到文件')
//     downloadIamge(pdfFile.url,pdfFile.originalFileName || new Date(Date.now()+28800000).toISOString())
//     callbackBoxFileList(rowData.packingId)
//   } else {
//     console.log(rowData)
//     ElMessage.error('未找到文件')
//   }
}
 //弹出合同
 const downloadUrlTap=()=>{
    downloadUrlDialog.value=true
    let url=JSON.parse(formData.value.downloadUrl)
    console.log('url',url)
    downloadUrl.value=url
    // console.log('downloadUrl',downloadUrl.url)
 }
 //弹出提箱
 const tixiangTap=(val)=>{
    tabsValue.value=val
    tixiangDialog.value=true
 }
 //弹出还箱
 const huanxiangTap=(val)=>{
    tabsValue.value=val
    huanxiangDialog.value=true
 }
  //弹出财务
 const financialTap=(val)=>{
    tabsValue.value=val
   financialDialog.value=true
 }
 //关闭弹框
 const closeDialog=()=>{
    getSetBoxInfo()
 }
 const mouseenterShow=(index)=>{
    console.log(index)
    indexShow.value=index
 }
</script>

<style lang="scss" scoped>
.row-step{
    border: 1px solid #E1E1E1;
}
.step{
    display: flex;          // 关键改动
    align-items: center;    // 关键改动
    justify-content: center; // 可选（如果需要水平居中）
    gap: 4px;     

    color: #666;
    height: 40px;
    line-height: 40px; 
    position: relative;
    font-size: 14px;
    padding-right: 40px; // 为箭头留出空间 
    &::after {
        content: "";
        position: absolute;
        right: -14px;
        top: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 27px;
        height: 27px;
        border-right: 1px solid #E1E1E1;
        border-top: 1px solid #E1E1E1;
        z-index: 1;
        // background-color: #32BB86;
    }
}
.arrow-col-45 {
  background-color: #32BB86;
  background-size: cover;
  color: #fff;
  position: relative;
  padding-right: 40px; // 为箭头留出空间 
  &::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-right: 2px solid #32BB86;
    border-top: 2px solid #32BB86;
    z-index: 1;
    background-color: #32BB86;
  }
  
    //   &:hover::after {
    //     border-color: darken(#409EFF, 10%);
    //   }
}
.arrow-col-35{
    background-color: #32BB86;
    background-size: cover;
    color: #fff;
    position: relative;
    padding-right: 40px; // 为箭头留出空间 
}
.last-step{
    &::after {
        content: "";
        border:none
    }
}
._remark{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #eb6363;
}
.step35{
    display: flex;          // 关键改动
    align-items: center;    // 关键改动
    justify-content: center; // 可选（如果需要水平居中）
    gap: 4px;     

    color: #666;
    height: 40px;
    line-height: 40px; 
    position: relative;
    font-size: 14px;
    padding-right: 40px; // 为箭头留出空间 
    background-color: #eee;
    &::after {
        content: "";
        position: absolute;
        right: -14px;
        top: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 27px;
        height: 27px;
        border-right: 1px solid #E1E1E1;
        border-top: 1px solid #E1E1E1;
        z-index: 1;
    }
}
.arrow-col-45-35 {
  background-size: cover;
  color: #666;
  position: relative;
  padding-right: 40px; // 为箭头留出空间 
  &::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 20px;
    transform: translateY(-50%) rotate(45deg);
    width: 27px;
    height: 27px;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
    background-color: #eee;
  }
}

:deep .is-process{
    font-weight: normal;
}
:deep .el-step__icon.is-icon{
    width: 30px;
}
:deep .is-process .is-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    color: #999;
}
:deep .is-wait .is-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    color: #999;
}
.but-for{
    display: flex;
    margin-top: 20px;   
}
.but-list{
    border-radius: 4px;
    border: 1px solid #2158f3;
    color: #2158F3;
    padding: 3px 15px;
    margin-right: 20px;
    cursor: pointer;
}
</style>